import React from 'react'
import { useState } from 'react'
import styles from './index.module.less'
import Navbar from '@/comopnents/Navbar'
import Captcha from '@/comopnents/Captcha'
import { Form, Input, Button, Toast, Dialog } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import Loading from '@/comopnents/loading'
import { resetPassword } from '@/utils/my/resetpsd'
import { useNavigate } from 'react-router-dom'

interface formType {
    username: string
    password: string
    captcha: string
}


export default function Resetpassword() {

    const navigate = useNavigate()


    // 密码框是否可见
    const [visible, setVisible] = useState<boolean>(false)
    // 是否点击了重置密码
    const [isLoading, setIsLoading] = useState<boolean>(false)
    // 验证码
    const [captchaVal, setCaptchaVal] = useState<string>()


    // 重置密码
    const resetPsd = (val: formType) => {
        if (val.captcha === captchaVal) {

            // 重置提示
            Dialog.confirm({
                title: '重置提示',
                content: '是否确定重置密码',
                onConfirm: () => {
                    // 执行重置密码的函数
                    updatePsd(val.username)
                },
                onCancel: () => {
                    Toast.show({
                        content: '你取消了重置密码',
                        duration: 1000
                    })
                }
            })
            return
        }
        Toast.show({
            icon: 'fail',
            content: '验证码错误',
            duration: 1000
        })
    }

    const updatePsd = async (username: string) => {
        // 进入加载状态
        setIsLoading(true)
        let res: resType = await resetPassword(username)
        if (res.code === 20000) {
            Toast.show({
                icon: 'success',
                content: '修改成功,即将进入登录页面',
                duration: 1000,
                afterClose: () => {
                    localStorage.clear()
                    navigate('/my/login')
                    setIsLoading(false)
                }
            })
            return
        }
        setIsLoading(false)

    }

    return (
        <>
            <Navbar></Navbar>
            <div className={styles.findPsdBox}>
                <Form className={styles.formBox} requiredMarkStyle='text-required' onFinish={resetPsd}>
                    <Form.Item className={styles.info} name='username' rules={[{ required: true, message: '手机号' }, { pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/, message: '请输入正确的手机号' }]} >
                        <Input type='number' clearable placeholder='手机号' />
                    </Form.Item>

                    <Form.Item className={styles.info} name='password' rules={[{ required: true, message: '请输入新密码' }, { min: 5, max: 12, message: '密码长度应为5~12位之间' }]} extra={
                        <div className={styles.eye}>
                            {!visible ? (
                                <EyeInvisibleOutline onClick={() => setVisible(true)} />
                            ) : (
                                <EyeOutline onClick={() => setVisible(false)} />
                            )}
                        </div>
                    } >
                        <Input clearable type={visible ? 'text' : 'password'} placeholder='请输入密码' />
                    </Form.Item>

                    <Form.Item className={styles.info} name='captcha' rules={[{ required: true, message: '请输入验证码' }, { len: 4, message: '验证码长度为4位' }]}>
                        <Input clearable placeholder='请输入验证码' />
                    </Form.Item>

                    <div className={styles.yzm}>
                        <Captcha captchaVal={captchaVal} getTrueCaptcha={(val?: string) => setCaptchaVal(val)}></Captcha>
                    </div>

                    <Button className={styles.submit} shape='rounded' type='submit' color='primary' size='large'>
                        {
                            isLoading ? <Loading></Loading> : <>重置密码</>
                        }
                    </Button>
                </Form>
            </div>
        </>
    )
}
